<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="format-detection" content="telephone=no,email=no">
    <title>idea</title>
    <style>
        #box{width:300px;margin:auto;padding-top:100px;}
        .row{padding:3px;}
        input{
            width:240px;height:30px;line-height:28px;
            border:1px solid #888;font-size:24px;
        }
        .btn-box{padding:3px;line-height:28px;text-align:center;}
        .btn{color:#B2B3B3;}
        button{width:100px;height:30px;}
    </style>
</head>

<body>
    <div id="box">
        <div class="row">user: <input id="user" type="text"></div>
        <div class="row">pass: <input id="pass" type="password"></div>
        <div class="btn-box">
            <a class="btn" href="javascript:location.reload()">刷新</a>
            <button id="btn" type="submit">登录</button>
        </div>
    </div>
</body>

</html>

<script>
    const $=function(id){ return document.getElementById(id); };
    const $USER=$('user'), $PASS=$('pass');
    $('btn').onclick = function(){
        var $xhr = new XMLHttpRequest();
        $xhr.open("GET", '/', false, $USER.value, $PASS.value);
        $xhr.onreadystatechange = function(){
            if($xhr.readyState===4) location.reload();
        };
        $xhr.send(null);
    };
    $USER.onkeyup = $PASS.onkeyup = function(evt){
        if(evt.keyCode===13) $('btn').onclick();
    };
</script>


